<template>
    <div>
        <hd-tab :tabs="tabs"/>
        <el-table :data="categories" border max-height="1000" size="mini" stripe>
            <el-table-column label="编号" prop="id" width="80"/>
            <el-table-column #default="{row:category}" label="栏目名称" prop="title" width="200">
                <span v-if="category.pid===0" class="font-bold text-lg">
                 {{ '-'.repeat(category.level * 3) }}
                {{ category.title }}
                </span>
                <span v-else>
                 {{ '-'.repeat(category.level * 3) }}
                {{ category.title }}
                </span>
            </el-table-column>
            <el-table-column #default="{row:category}" label="模型" width="150">
                {{ category.article.title }}
            </el-table-column>
            <el-table-column label="展现结构"  #default="{row:category}">
                <span v-if="category.pid!==0">{{category.structureTitle}}</span>
            </el-table-column>
            <el-table-column #default="{row:category}" label="推荐" width="80">
                <el-tag v-if="category.recommended==1" size="mini" type="danger">推荐</el-tag>
            </el-table-column>
            <el-table-column #default="{row:category}" label="置顶" width="80">
                <el-tag v-if="category.top==1" size="mini" type="warning">置顶</el-tag>
            </el-table-column>
            <el-table-column #default="{row:cate}" label="栏目类型" width="200">
                <span v-if="cate.type==1">普通栏目（不可有子栏目）</span>
                <span v-else-if="cate.type==2">封面栏目（可有子孙栏目）</span>
                <span v-else>单文章（仅文章，无子栏目）</span>
            </el-table-column>
            <el-table-column #default="{row:category}" label="预览图" width="150">
                <div v-if="category.preview">
                    <el-popover height="200" placement="right-end" trigger="hover" width="200">
                        <img slot="reference" :src="category.preview" class="w-16 h-16 object-cover"/>
                        <div>
                            <img :src="category.preview" class="w-full object-cover"/>
                        </div>
                    </el-popover>
                </div>
            </el-table-column>

            <el-table-column #default="{row:category}" label="层级" prop="title" width="200">
                {{ category.level }}
            </el-table-column>
            <el-table-column #default="{row:category}" label="栏目介绍">
                {{ category.description |ellipsis_Title }}
            </el-table-column>


            <el-table-column #default="{row:category}" label="操作" width="220">
                <el-button-group>
                    <el-button size="mini" type="success"
                               @click="$router.push({ name: 'admin.category.edit', params: { id: category.id } })">编辑
                    </el-button>
                    <el-button size="mini" type="danger" @click="del(category)">删除</el-button>
                </el-button-group>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import tabs from './tabs'

const columns = [
    {label: '编号', id: 'id', width: 100},
    {label: '栏目名称', id: 'title', width: 100},
    {label: '编号', id: 'id', width: 100}
]
export default {
    route: {meta: {title: '栏目列表'}},
    data() {
        return {tabs, categories: []}
    },
    async created() {
        this.load()
    },
    methods: {
        async load() {
            this.categories = await axios.get(`admin/category`)
        },
        async del(category) {
            this.$confirm(`确定删除【${category.title}】吗？删除栏目将删除栏目下的所有文章`, '温馨提示').then(async _ => {
                await axios.delete(`admin/category/${category.id}`)
                // this.$router.go(0)
            })
        }
    }
}
</script>

<style></style>
